<script lang="ts" setup>

import { reactive, ref } from 'vue'
const rentTypeList = reactive([
    { id: 1, title: '整租', },
    { id: 2, title: '合租/单间', },
    { id: 3, title: '公寓', },
    { id: 4, title: '短租', },
])
</script>

<template>
    <div class="header">
        <div class="first">
            <p class="first_p1">小默租房</p>
            <p class="first_p2">深圳</p>
        </div>

        <div class="rent-box1">
            <ul>
                <li v-for="item in rentTypeList" :key="item.id">
                    <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>

</template>

<style lang="less" scoped>
.header {
    width: 100%;
    height: 2rem;
    background-image:
        url('/imgs/home/home_header_bg.png');


    .first {
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        height: 0.6rem;
        display: flex;
        background-color: transparent;
        justify-content: space-between;
        align-items: center;

        p {
            background-color: transparent;
            color: white;
        }

        .first_p1 {
            font-size: 0.17rem;
            font-weight: 700;
        }

        .first_p2 {
            font-size: 0.12rem;
        }
    }


}

.rent-box1 {
    // position: absolute;
    height: 1.5rem;
    background-color: white;

    width: 95%;
    margin: 0 auto;
    margin-top: 0.8rem;
    border-radius: 0.1rem;

    ul {
        display: flex;
        background-color: white;
        border-top-left-radius: 0.1rem;
        border-top-right-radius: 0.1rem;

        li {
            background-color: aqua;
            border-top-left-radius: 0.1rem;
            border-top-right-radius: 0.1rem;
        }
    }
}
</style>